<!DOCTYPE html>
<html lang="en">
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>设备信息列表</title>
    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/device/searchDevice" id="logo">测试设备管理系统
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li>
                    <a href="#logSetting1" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-th-large"></i>
                        设备管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="searchDevice"><i class="glyphicon glyphicon-phone"></i>设备列表</a></li>
                        <li><a href="http://www.umeng.com/"><i class="glyphicon glyphicon-globe"></i>友盟数据</a></li>
                        <li><a href="showPieChart"><i class="glyphicon glyphicon-calendar"></i>图表统计</a></li>
                    </ul>

                </li>
                <li>
                    <a href="searchApk">
                        <i class="glyphicon glyphicon-gift"></i>
                        安装包管理
                    </a>
                </li>
                <li>
                    <a href="#logSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-search"></i>
                        质量统计
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="logMonitoring"><i class="glyphicon glyphicon-eye-open"></i>ELK日志监控</a></li>
                        <li><a href="http://10.37.18.77:8430/index.html"><i class="glyphicon glyphicon-eye-open"></i>代码覆盖率</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>PASSPORT日志监控</a></li>
                    </ul>

                </li>


                <li>
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">

            <div class="container">
                <div>
                    <font size="6">测试设备展示图表:</font>
                </div>
            <div class="panel-body">
                <div id="main2"
                     style="float:left;height: 400px; width: 960px; border: 1px dotted black">
                </div>
                <div id="main"
                     style="float:left;height: 400px; width: 480px; border: 1px dotted black">
                </div>

                <div id="main1"
                     style="float:left;height: 400px; width: 480px; border: 1px dotted black">
                </div>
                <br>




                <script type="text/javascript">
                    // 路径配置
                    require.config({
                        paths:{
                            'echarts' : 'http://echarts.baidu.com/build/echarts',
                            'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
                        }
                    });

                    // 使用
                    require(
                            [
                                'echarts',
                                'echarts/chart/pie' ,// 使用柱状图就加载bar模块，按需加载
                                'echarts/chart/bar'
                            ],
                            DrawCharts
                    );

                    function DrawCharts(ec) {
                        drawAndroid(ec);
                        drawIOS(ec);
                        drawBar(ec);
                    }

                    function drawAndroid(ec) {
                        // 基于准备好的dom，初始化echarts图表
                        myChart = ec.init(document.getElementById('main'));

                        option = {
                            title : {
                                text: '系统版本占比',
                                subtext: 'Android',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient : 'vertical',
                                x : 'left',
                                data:[]

                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            series : []
                        };

                        myChart.showLoading({
                            text: '正在努力的读取数据中...',
                        });

                        $.ajax({
                            url:'getChartJsonOfAndroid',
                            data: {},
                            dataType:'json',
                            success:function(data){
                                var legendData=[];
                                var seriesData=[];
                                if(data!=null && data['series'].length>0){
                                    legendData=data['legend'];
                                    seriesData.push({
                                        'name':'系统版本占比',
                                        'type':'pie',
                                        'radius' : '55%',
                                        'center': ['50%', '60%'],
                                        'data':function(){
                                            var t_data=[];
                                            for(var i=0,len=data['series'].length;i<len;i++){
                                                t_data.push({
                                                    'name':legendData[i],
                                                    'value':data['series'][i]
                                                });
                                            }
                                            return t_data;
                                        }()
                                    });
                                }
                                option.legend.data=legendData;

                                myChart.setOption(option);
                                myChart.setSeries(seriesData);
                            },
                            error:function(){
                                var legendData=[''];
                                var seriesData = [
                                    {
                                        'name':'系统版本占比',
                                        'type':'pie',
                                        'radius' : '55%',
                                        'center': ['50%', '60%'],
                                        data: [0]
                                    }
                                ];
                                option.legend.data=legendData;
                                myChart.setOption(option);
                                myChart.setSeries(seriesData);

                            },
                            complete:function(){

                                myChart.hideLoading();
                            }
                        });
                    }

                    function drawIOS(ec) {
                        // 基于准备好的dom，初始化echarts图表
                        myChartIOS = ec.init(document.getElementById('main1'));

                        option1 = {
                            title : {
                                text: '系统版本占比',
                                subtext: 'IOS',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient : 'vertical',
                                x : 'left',
                                data:[]

                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            series : []
                        };

                        myChartIOS.showLoading({
                            text: '正在努力的读取数据中...',
                        });

                        $.ajax({
                            url:'getChartJsonOfIOS',
                            data: {},
                            dataType:'json',
                            success:function(data){
                                var legendData=[];
                                var seriesData1=[];
                                if(data!=null && data['series'].length>0){
                                    legendData=data['legend'];
                                    seriesData1.push({
                                        'name':'系统版本占比',
                                        'type':'pie',
                                        'radius' : '55%',
                                        'center': ['50%', '60%'],
                                        'data':function(){
                                            var t_data=[];
                                            for(var i=0,len=data['series'].length;i<len;i++){
                                                t_data.push({
                                                    'name':legendData[i],
                                                    'value':data['series'][i]
                                                });
                                            }
                                            return t_data;
                                        }()
                                    });
                                }
                                option1.legend.data=legendData;

                                myChartIOS.setOption(option1);
                                myChartIOS.setSeries(seriesData1);
                            },
                            error:function(){
                                var legendData=[''];
                                var seriesData1 = [
                                    {
                                        'name':'系统版本占比',
                                        'type':'pie',
                                        'radius' : '55%',
                                        'center': ['50%', '60%'],
                                        data: [0]
                                    }
                                ];
                                option.legend.data=legendData;
                                myChartIOS.setOption(option1);
                                myChartIOS.setSeries(seriesData1);

                            },
                            complete:function(){

                                myChartIOS.hideLoading();
                            }
                        });
                    }


                    function drawBar(ec) {
                         myChartBar = ec.init(document.getElementById('main2'));
                         option2 = {
                            title: {
                                text: '测试手机分布-小组',
                                x:'center'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:[],
                                y:'bottom'

                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: { show: true },
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            xAxis: [{
                                type: 'category',
                                data:[]
                            }],
                            yAxis: [{
                                type: 'value'
                            }],
                            series: []
                        };

                        // 载入动画---------------------
                        myChartBar.showLoading({
                            text: '正在努力的读取数据中...',    //loading话术
                        });

                        $.ajax({
                            url:'getBarChart',
                            data:{},
                            dataType:'json',
                            success:function(data){
                                //后台需要返回以下结构的json数据
                                var legendData=[];
                                var xAxisData=[];
                                var seriesData=[];
                                if(data!=null && data['series'].length>0){
                                    legendData=data['legend'];
                                    xAxisData=data['axis'];
                                    seriesData.push({
                                        'name':'设备分布',
                                        'type':'bar',   //柱状图和拆线图类似只要将bar 改成line
                                        'data':data['series'],
                                        markPoint : {
                                            data : [
                                                {type : 'max', name: '最大值'},
                                                {type : 'min', name: '最小值'}
                                            ]
                                        },
                                        markLine : {
                                            data : [
                                                {type : 'average', name: '平均值'}
                                            ]
                                        }
                                    });
                                }
                                option2.legend.data=[legendData];
                                option2.xAxis[0]['data']=xAxisData;

                                myChartBar.setOption(option2);
                                myChartBar.setSeries(seriesData);
                            },
                            error:function(){
                                var legendData=[''];
                                var xAxisData=[''];
                                var seriesData = [
                                    {
                                        name:'订单数',
                                        type: 'bar',    //柱状图和拆线图类似只要将bar 改成line
                                        data: [0]
                                    }
                                ];
                                option2.legend.data=[legendData];
                                option2.xAxis[0]['data']=xAxisData;

                                myChartBar.setOption(option2);
                                myChartBar.setSeries(seriesData);

                            },
                            complete:function(){
                                //停止动画载入提示
                                myChartBar.hideLoading();
                            }
                        });
                    }

                </script>
            </div>
            </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>


</html>